// import Vue from 'vue'

import * as WithRender from './setting.html?style=./setting.less'
import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/theme/monokai.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/clike/clike'
import 'codemirror/mode/go/go'
import 'codemirror/mode/htmlmixed/htmlmixed'
// import 'codemirror/mode/http/http'
import 'codemirror/mode/php/php'
import 'codemirror/mode/python/python'
import 'codemirror/mode/http/http'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/vue/vue'
import 'codemirror/mode/xml/xml'
import 'codemirror/addon/scroll/simplescrollbars.css'
import 'codemirror/addon/scroll/simplescrollbars'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/html-hint'
import 'codemirror/addon/hint/xml-hint'
import 'codemirror/addon/hint/anyword-hint'
import 'codemirror/addon/hint/css-hint'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/fold/markdown-fold'
import 'codemirror/mode/meta'

// import "codemirror/addon/fold/foldgutter.css"

// import "codemirror/addon/fold/foldcode"

// import "codemirror/addon/fold/brace-fold"
import 'codemirror/addon/selection/active-line'
@WithRender
@Component

export class Setting extends Vue {
  nameArray = new Array();
  modeArray = new Array();
  mapArray = new Array();
  CodeMirrorEditor;
  something = "";

  mounted() {
    console.log(CodeMirror)
    for (var i = 0; i < CodeMirror.modeInfo.length; i++) {
      let mode = CodeMirror.modeInfo[i];
      this.mapArray.push({ name: mode.name, mode2: mode.mode })
    }
    this.something = "javascript"
    document.getElementById("theme").nodeValue = "javascript"
    this.setmirror()
  }
  transToSrc(name: string): string {
    return "assets/codemirror/mode/" + name + "/" + name + ".js";
  }

  @Watch('something')
  aaa() {
    var headElement = document.body;
    var element = document.createElement("script");
    element.setAttribute("src", this.transToSrc(this.something));
    headElement.appendChild(element);
    element.onload = () => {
      this.CodeMirrorEditor.setOption("mode", this.something)
    }
  }


  setmirror() {
    let myTextarea = document.getElementById('editor');
    this.CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
      theme: 'monokai',
      styleActiveLine: true,
      mode: 'javascript',
      extraKeys: { "Ctrl": "autocomplete" },//输入s然后ctrl就可以弹出选择项  
      // lineNumbers: true,
      tabSize: 10,
      // readOnly:"nocursor",
      smartIndent: true,
      scrollbarStyle: "overlay"
      // keymap:"defaule"
    });
    // this.CodeMirrorEditor.setOption('lineWrapping', true);
    this.CodeMirrorEditor.on("keypress", () => {
      //编译器内容更改事件
      console.log(this.CodeMirrorEditor)
      this.CodeMirrorEditor.showHint();
    });
    this.CodeMirrorEditor.setValue("Hello Kitty\nHello Tony\nHow are you\nFine thank you and you \nI love you")

    this.CodeMirrorEditor.setOption("lineNumbers", "true")
    // this.CodeMirrorEditor.addOverlay("coconut");
    // this.CodeMirrorEditor.markText({line:0,ch:0},{line:0,ch:0})
    this.CodeMirrorEditor.setBookmark({ line: 0, ch: 0 }, { line: 0, ch: 1 }, { readOnly: true });
    this.CodeMirrorEditor.setCursor(0)
    this.CodeMirrorEditor.setSize(600, 600)
  }
}